module.exports = {
  devServer: {
    port: 8081, // Change default port to avoid conflicts
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // Backend server
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    // Enable hot reload for better development experience in IDE
    hot: true,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  },
  // Make the app responsive for mobile
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  productionSourceMap: false,
  // Improve compatibility with IDEs
  chainWebpack: config => {
    config.resolve.symlinks(false) // Important for some IDE functionality
  }
}